<template>

    <div class="my">
        <div class="mys">
            <div class="header">
                <van-cell-group inset class="header2">
                    <van-cell is-link to="/login" v-if="flag" class="van-cell1">
                        <template #title>
                            <div>
                                立即登录
                            </div>
                        </template>
                        <template #icon>
                            <van-icon name="smile-o" size="60px" class="icon  icon2" />
                        </template>
                    </van-cell>

                    <van-cell is-link class="van-cell1" to="/personal" v-else>
                        <template #title>
                            <div>
                                {{ username }}
                            </div>
                        </template>
                        <template #icon>
                            <van-icon :name="userIcon" size="60px" class="icon" />
                        </template>
                    </van-cell>
                </van-cell-group>
            </div>
            <van-cell-group inset>
                <van-cell title="个人资料" is-link icon="debit-pay" :to="person" />
                <van-cell title="咖啡钱包" is-link icon="after-sale" :to="coffeeWallet" :value="num" />
                <van-cell title="优惠券" is-link icon="pending-payment" :to="coupon" :value="num">
                </van-cell>
                <van-cell title="兑换优惠" is-link icon="ecard-pay" :to="offers" />
                <van-cell title="发票管理" is-link icon="ecard-pay" />
                <van-cell title="帮助反馈" is-link icon="like-o" to="/help" />
            </van-cell-group>
            <van-image width="100%" height="100%" class="image"
                src="https://tse3-mm.cn.bing.net/th/id/OIP-C.7FpLSk8e26NtpBH97cnd3wHaEK?w=319&h=180&c=7&r=0&o=5&dpr=1.3&pid=1.7" />
        </div>
    </div>
    <FooterVue></FooterVue>
</template>
<script setup>
import FooterVue from '@/components/home/footer/Footer.vue';
import { useMysHandler } from '@/hooks/mys/useMys'
import { getUserCoupon } from '@/api/user/user'
import { useUserStore } from "@/store";
import { ref, onMounted } from 'vue';
const userStore = useUserStore()
const userid = ref()
const num = ref()
const { username, flag, coffeeWallet, person, coupon, offers, userIcon } = useMysHandler()
onMounted(() => {
    userid.value = userStore.userid
    getUserCoupon({ uId: userid.value }).then(res => {
        localStorage.getItem('token') ? num.value = res.list.length + '张' : num.value = ''
    })
})


</script>

<style lang="scss" scoped>
.my {
    height: 100%;
    background-color: #fff;

    .mys {
        background-color: #fff;

        .header {
            background-color: rgb(100, 71, 58);
            padding: 50px 0;
            color: #fff;

            .header2 {
                border: none;
                background-color: rgb(100, 71, 58);

                .van-cell1 {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    background-color: rgb(100, 71, 58);
                    color: #fff;

                    .icon {
                        margin-left: 50px;
                        margin-right: 30px;
                    }
                }
            }
        }

        .image {

            margin-bottom: 70px;
        }
    }
}
</style>